<!-- 数字竞猜-分享弹窗 -->
<template>
    <n-modal class="tips_sm_modal" :show="show" :mask-closable="false">
        <n-card class="form_card" :bordered="false" size="huge" role="dialog" aria-modal="true">
            <div class="form_container vertical" id="sharebox">
                <div class="header rel center">
                    <span>数字竞猜活动</span>
                    <span class="close abs center pointer t-sm" @click="show = false">
                        <iconpark-icon icon-id="tanctongyguanb" color="#fff" size="1rem"></iconpark-icon>
                    </span>
                </div>
                <div class="banner">
                    <img style="width:100%;height:100%" src="/img/activity/act_b.webp" alt="^">
                </div>
                <div class="guess_share_form">
                    <div class="guess_share_content">
                        <!-- 头部说明 -->
                        <div class="share_content_title">
                            <div class="title_item">
                                <div class="name">活动说明：</div>
                                <div class="content">这是一段很长很详细的活动说明，这是一段很长很详细的活动说明，这是一段很长很详细的活动说明，这是一段很长很详细的活动说明。</div>
                            </div>
                            <div class="title_item">
                                <div class="name">竞猜内容：</div>
                                <div class="content">参与者需要猜测北越彩票GiaiDB特别奖最后两位号码</div>
                            </div>
                            <div class="title_item">
                                <div class="name">竞猜结果：</div>
                                <div class="content">以北越特别奖结果的最后两位为开奖结果，玩家输入竞猜号码提交后 系统会记录玩家竞猜数字并展示在活动页面</div>
                            </div>
                            <div class="title_item">
                                <div class="name">每日竞猜时间：</div>
                                <div class="content">00:00到18:25 (UTC+7)</div>
                            </div>
                            <div class="title_item">
                                <div class="name">系统开奖时间：</div>
                                <div class="content">18:40 (UTC+7)</div>
                            </div>
                            <div class="title_item">
                                <div class="name">系统派奖时间：</div>
                                <div class="content">19:00 (UTC+7)</div>
                            </div>
                            <div class="title_item">
                                <div class="name">中奖规则：</div>
                                <div class="content">以最快猜中数字的参与者做排名，设置不同的奖励 猜中速度越快奖励越高</div>
                            </div>
                            <div class="title_item">
                                <div class="name">竞猜条件：</div>
                                <div class="content">每日分享点facebook按钮并成功分享平台的用户即可获得参与条件（每天-次）</div>
                            </div>
                            <div class="title_item">
                                <div class="name">活动领取：</div>
                                <div class="content">参与者在赢得奖励以后,需成功分享获奖界面后才可领取彩金，彩金有流水限制（后台配置）</div>
                            </div>
                        </div>

                        <!-- 表格 -->
                        <div class="share_content_table">
                            <div class="table_logo">
                                <img style="width:100%;height:100%" src="/img/activity/act_p.webp" alt="^">
                                <div class="logo_text">奖品设置</div>
                            </div>
                            <div class="inner_table">
                                <div class="tr th">
                                    <div class="td">奖项</div>
                                    <div class="td">排名</div>
                                    <div class="td">奖品</div>
                                </div>
                                <div class="tr" v-if="props.allData.prize_cfg && props.allData.prize_cfg[0]">
                                    <div class="td">一等奖</div>
                                    <div class="td">{{ props.allData.prize_cfg[0].ranking || '--' }}</div>
                                    <div class="td">{{ props.allData.prize_cfg[0].prize || '--' }}</div>
                                </div>
                                <div class="tr" v-if="props.allData.prize_cfg && props.allData.prize_cfg[1]">
                                    <div class="td">二等奖</div>
                                    <div class="td">{{ props.allData.prize_cfg[1].ranking || '--' }}</div>
                                    <div class="td">{{ props.allData.prize_cfg[1].prize || '--' }}</div>
                                </div>
                                <div class="tr" v-if="props.allData.prize_cfg && props.allData.prize_cfg[2]">
                                    <div class="td">三等奖</div>
                                    <div class="td">{{ props.allData.prize_cfg[2].ranking || '--' }}</div>
                                    <div class="td">{{ props.allData.prize_cfg[2].prize || '--' }}</div>
                                </div>
                                <div class="tr" v-if="props.allData.prize_cfg && props.allData.prize_cfg[3]">
                                    <div class="td">四等奖</div>
                                    <div class="td">{{ props.allData.prize_cfg[3].ranking || '--' }}</div>
                                    <div class="td">{{ props.allData.prize_cfg[3].prize || '--' }}</div>
                                </div>
                                <div class="tr" v-if="props.allData.prize_cfg && props.allData.prize_cfg[4]">
                                    <div class="td">幸运奖</div>
                                    <div class="td">{{ props.allData.prize_cfg[4].ranking || '--' }}</div>
                                    <div class="td">{{ props.allData.prize_cfg[4].prize || '--' }}</div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="btn">
                        <n-flex @click="fbShare" v-if="!props.allData.joined" align="center" justify="center"
                            class="button_color button n-buttom submit_btn weight_5 pointer" block>
                            立即分享
                        </n-flex>
                        <n-flex @click="nextStep" v-if="props.allData.joined" align="center" justify="center"
                            class="button_color button n-buttom submit_btn weight_5 pointer" block>
                            立即参与
                        </n-flex>
                    </div>
                </div>
            </div>

        </n-card>
    </n-modal>

    <DialogStatus @share="fbShare" ref="DialogStatusRef" :status="3" />
</template>

<script setup lang="ts">
import { ref } from "vue"
import DialogStatus from "./DialogStatus.vue"
import { NetPacket } from '@/netBase/NetPacket.ts';
import H5Websocket from "@/net/Net1";

const emits = defineEmits(['nextStep'])

const DialogStatusRef = ref()
const props = defineProps({
    allData: {
        type: Object,
        default: () => { }
    }
})

const show = ref(false)
const open = () => {
    show.value = true
}

const nextStep = () => {
    show.value = false
    emits('nextStep')
}


// 分享
const fbShare = () => {
    const url = props.allData.share_url; // 要分享的链接
    //   const title = ''; // 分享的标题
    const description = props.allData.share_words; // 分享的描述
    //   const imageUrl = 'https://your-website.com/image.jpg'; // 分享的图片链接
    // 调用 Facebook 分享接口
    // @ts-ignore
    FB.ui({
        method: 'share',
        href: url,
        quote: `${description}`,
        // hashtag: '#sharebox', // 可选
        // picture: imageUrl // 可选
    }, function (response: any) {
        // console.error('????', response)
        if (response && !response.error_message) {
            const req: any = NetPacket.req_numbers_betting_share();
            req.type = 0
            H5Websocket.sendMessageHandler(req);
        } else {
            DialogStatusRef.value.open()
        }
        nextStep()
    });
}


defineExpose({
    open
})
</script>

<style lang="less" scoped>
.form_container {
    .header {
        position: relative;
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-bottom: 2px solid rgba(38, 41, 76, 1);
        font-size: 20px;

        .close {
            right: 20px;
        }
    }

    .banner {
        margin: 20px auto 0 auto;
        width: 880px;
        height: 150px;
        border: 1px solid #26294C;
        border-radius: 8px;
        overflow: hidden;
    }
}

.guess_share_form {
    padding: 20px 40px 40px 40px;

    .btn {
        width: 372px;
        height: 46px;
        margin: 30px auto 0 auto;

        .button {
            width: 372px;
            height: 46px;
        }
    }

    .guess_share_content {
        .share_content_title {
            .title_item {
                display: flex;
                align-items: flex-start;
                margin-bottom: 8px;

                .name {
                    flex-shrink: 0;
                    width: 150px;
                    color: #AFBABD;
                    text-align: right;
                    font-size: 16px;
                    font-weight: 400;
                    line-height: normal;
                }

                .content {
                    flex: 1;
                    color: #FFF;
                    font-size: 16px;
                    font-weight: 400;
                    line-height: normal;
                }
            }
        }

        .share_content_table {
            margin-top: 24px;
            border: 1px solid #26294C;
            padding: 48px 20px 20px 20px;
            border-radius: 10px;
            background-color: #171B44;
            position: relative;

            .table_logo {
                width: 214px;
                height: 32px;
                position: absolute;
                left: 50%;
                transform: translateX(-50%);
                top: -4px;

                .logo_text {
                    width: 100%;
                    height: 100%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    color: #FFF;
                    font-size: 16px;
                    font-weight: 500;
                    position: absolute;
                    top: 0;
                    left: 0;
                }
            }


            .inner_table {
                border: 1px solid #26294C;
                border-radius: 10px;
                overflow: hidden;

                .tr {
                    display: flex;
                    align-items: stretch;
                    border-bottom: 1px solid #26294C;

                    &:nth-child(odd) {
                        background: #0D0E2E;
                    }

                    &:nth-child(even) {
                        background: #121336;
                    }

                    &:nth-last-child {
                        border-bottom: none;

                    }

                    .td {
                        flex: 1;
                        height: 40px;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        color: #AFBABD;
                        font-size: 14px;
                        font-weight: 400;
                        border-right: 1px solid #26294C;

                        &:nth-last-child {
                            border-bottom: none;

                        }
                    }
                }

                .th {
                    background: #1B1F4B !important;

                    .td {
                        color: #FFF;
                        font-size: 16px;
                    }
                }
            }
        }
    }
}
</style>

<style lang="less" scoped>
// @import '@/assets/CommonForm.less';

// 弹窗提示
.tips_sm_modal {
    &.form_card {
        width: 960px !important;

        :deep(.n-card__content) {
            padding: 0 !important;
        }
    }
}
</style>